<template>
  <div class="component-levelpassword" v-if="!ok">
    <div class="icon">
      <i class="iconfont icon-security-fill"></i>
      {{ lang.t('components.levelpassword.title') }}
    </div>
    <div class="form">
      <Password ref="input" size="large" @over="onCheck" />
    </div>
  </div>
  <slot v-else></slot>
</template>

<script>
import { ref, nextTick, onUpdated } from 'vue'
import app from "@/app"
import Password from './password'
import configModel from '@/plugin/config/model'

export default {
  components: {
    Password
  },
  setup() {
    const input = ref()
    const ok = ref(false)
    // 判断是否正常
    const onCheck = pass => {
      if(pass == configModel.levelPassword()) {
        ok.value = true
      } else {
        app.ui.message('error', 'error', 'components.levelpassword')
        input.value?.empty(true)
      }
    }

    nextTick(() => {
      input.value?.empty(true)
    })

    onUpdated(() => {
      input.value?.empty(true)
    })

    // 没有二级密码直接显示
    if(!configModel.levelPassword()) {
      ok.value = true
    }

    return {
      lang: app.lang,

      input,
      ok,
      onCheck
    }
  }
}
</script>